<template>
  <div>
    <BasicDialog v-model="visible" title="选择用户" :submitBtnLoading="submitBtnLoading" @submit="handleSubmit">
      <div class="flex_box">
        <el-tabs class="el_tabs" type="border-card" v-model="activeTab">
          <el-tab-pane v-if="leftTreeTypeList.includes('dep')" name="dep" label="部门">
            <avue-tree :data="depList" :option="treeOption" v-loading="depLoading"
              @node-click="handleDepTreeClick"></avue-tree>
          </el-tab-pane>
          <el-tab-pane v-if="leftTreeTypeList.includes('role')" name="role" label="角色">
            <avue-tree :data="roleList" :option="treeOption" v-loading="roleLoading"
              @node-click="handleRoleTreeClick"></avue-tree>
          </el-tab-pane>
        </el-tabs>
        <basic-crud class="basic_crud" v-model:defaultSelectList="defaultSelectList" :option="option" ref="basicCrudRef"
          type="refer" :selectType="selectType" businessUrl="/permission/userQueryController"
          :apiListParams="apiListParams">
        </basic-crud>
      </div>
      <template #footer-left>
        <span style="text-align: left">已选择
          <span style="color: #1e89ff">{{ defaultSelectList.length }}</span>
          条数据：
          <el-tag v-for="item in defaultSelectList" closable @close="handleClose(item)" style="margin-right: 10px;">{{
            item.name }}</el-tag></span>
      </template>
    </BasicDialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { apiRefer as apiGetRoleRefer } from '@/apis/permission/roleManage'
import { apiRefer as apiGetDepRefer } from '@/apis/orgManage/depManage'
import { ElMessage } from 'element-plus'
const props = defineProps({
  selectType: {
    type: String,
    default: 'multiple'
  },
  leftTreeTypeList: {
    type: Array,
    default: () => ['dep', 'role']
  },
  // 必选，点击确定会校验
  required: {
    type: Boolean,
    default: true
  },
  submitBtnLoading: {
    type: Boolean,
    default: false
  },
  // 关闭窗口情况清空选择的数据
  closeClearSelect: {
    type: Boolean,
    default: false
  }
})

const visible = defineModel()
const defaultSelectList = ref([])
const roleLoading = ref(false)
const depLoading = ref(false)
const activeTab = ref()
const roleList = ref([])
const depList = ref([])
const apiListParams = ref({})

const treeOption = {
  menu: false,
  addBtn: false,
  props: {
    label: 'name',
    value: 'id',
  }
}
const getRoleTree = async () => {
  const res = await apiGetRoleRefer({}, roleLoading)
  roleList.value = res.data
}
const getDepTree = async () => {
  const res = await apiGetDepRefer({}, depLoading)
  depList.value = res.data
}

const option = ref({
  menuWidth: 320,
  searchSpan: 8,
  height: '55vh',
  selection: true,
  menu: false,
  addBtn: false,
  column: [
    {
      label: '工号',
      prop: 'code',
      sortable: true,
      search: true,
      fixed: true,
      width: 100,
    },
    {
      label: '姓名',
      prop: 'name',
      sortable: true,
      search: true,
      fixed: true,
      width: 100,
    },
    {
      label: '所属部门',
      prop: 'deptIdName',
    },
    {
      label: '移动电话',
      prop: 'mobile',
      sortable: true,
      width: 150,
    },
    {
      label: '性别',
      prop: 'sex',
      width: 80,
      type: 'radio',
      value: 'sex_man',
      dicData: [
        { label: '男', value: 'sex_man' },
        { label: '女', value: 'sex_woman' },
      ],
    },
  ],
})

const handleDepTreeClick = (data) => {
  apiListParams.value.roleId = undefined
  apiListParams.value.deptId = data.id
}
const handleRoleTreeClick = (data) => {
  apiListParams.value.deptId = undefined
  apiListParams.value.roleId = data.id
}

const handleClose = (item) => {
  defaultSelectList.value = defaultSelectList.value.filter((itm) => {
    if (itm.id === item.id) {
      return false
    } else {
      return true
    }
  })
}

watch(() => props.leftTreeTypeList, (newV) => {
  if (newV.length > 0) {
    activeTab.value = newV[0]
    if (newV.includes('dep')) {
      getDepTree()
    }
    if (newV.includes('role')) {
      getRoleTree()
    }
  } else {
    activeTab.value = undefined
  }
}, { immediate: true, deep: true })

watch(() => props.closeClearSelect, (newV) => {
  if (!newV && props.closeClearSelect) {
    defaultSelectList.value = []
  }
})

const emit = defineEmits(['submit'])
const handleSubmit = () => {
  if (props.required && defaultSelectList.value.length === 0) {
    return ElMessage.warning('请选择用户!')
  }
  if (props.selectType === 'radio') {
    emit('submit', defaultSelectList.value[0])
  } else {
    emit('submit', defaultSelectList.value)
  }
}
</script>

<style lang='scss' scoped>
.flex_box {
  display: flex;

  .el_tabs {
    width: 240px;
    flex-shrink: 0;
  }

  .basic_crud {
    margin-left: 20px;
    flex: 1;
    overflow: hidden;
  }

  ::v-deep {
    .el-tree {
      max-height: 50vh;
    }
  }
}
</style>
